<template>
  <div class="content">
    <div class="gov-sub4">
      <div>
        <div class="gov-box">
          <div class="gov-title">
            <p>行政中心太阳能光热系统负荷趋势<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart1" :theme="chartTheme" auto-resize></chart>
        </div>
        <div class="gov-box">
          <div class="gov-title">
            <p>行政中心太阳能光热系统电量统计<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart2" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
      <div>
        <div class="gov-box">
          <table class="gov-table">
            <thead>
              <tr>
                <th rowspan="2">日期</th>
                <th colspan="2">用量</th>
              </tr>
              <tr>
                  <th>有功用电量【kWh】</th>
                  <!-- <th>耗水量【㎡】</th> -->
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in consumList" :key="item.index">
                <td>{{item.TIME}}</td>
                <td>{{item.CONSUM}}</td>
                <!-- <td>12.8</td> -->
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'governmentD',
  data () {
    return {
      chartTheme: {},
      chart1: {
        color: ['#0045de'],
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : ['1:00','1:05','1:10','1:15','1:20','1:25','1:30','1:35','1:40','1:45','1:50','1:55','2:00','2:05'],
          }
        ],
        yAxis : [
          {
            name:'有功功率',
            type : 'value',
          }
        ],
        series : [
          {
            name:'有功功率',
            type:'line',
            stack: '总量',
            smooth: true,
            data:[120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210],
            areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(0, 69, 222)'
                  }, {
                    offset: 1,
                    color: 'rgb(0, 100, 222)'
                  }])
                }
            },

          }
        ]
      },
      chart2: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
          }
        ],
        series : [
          {
            name:'直接访问',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#994dff'},
                  {offset: 1, color: '#0020ed'}
                ]),
              }
            }
          }
        ]
      },
      consumList: [],
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })
    this.getData()
  },
  methods: {
    getData: function () {
      this.$http('/vqdisplay/solarenergy/data')
      .then( response => {
        let _data = response.data.body
        console.log(_data)
        this.chart1.xAxis[0].data = _data.load_trend_line.xAxis
        this.chart1.series[0].data = _data.load_trend_line.series[0]['有功功率']

        this.chart2.xAxis[0].data = _data.consum_thisweek_bar.xAxis
        this.chart2.series[0].data = _data.consum_thisweek_bar.series[0]['有功用电量']
        this.consumList = _data.consum_thisweek_list
      })
    }
  }
}
</script>

<style scoped>
  @import '../../../style/government.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>